<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- -->
    <link rel="stylesheet" href="css/reader_search_resault(no).css">
    <link rel="stylesheet" href="css/reader_fine.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="js/JsBarcode.all.js"></script>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../static/css/reader_fine.css" th:href="@{/css/reader_fine.css}">
    <title>Document</title>
    <script type="text/javascript">
        function getQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
        function reader(){
            var name = getQueryString("name");
            var phone=getQueryString("phone");
            $("#reader").attr("href","/welcome?name=" + name + "&phone="+phone);
        }
        function getDate() {
            var date=new Date();
            var year=date.getFullYear();//年
            var month=date.getMonth()+1;//月
            var day=date.getDay();//日
            if(month<10){
                month="0"+month;
            }
            if(day<10){
                day="0"+day;
            }
            alert(year+"-"+month+"-"+day);
        }
    </script>
</head>-->
<div>
    <header class="header clearfix">
        <i class="iconfont icon-yun"></i>
        <i>Library</i>
        <i class="iconfont icon-yonghu"></i>
        <i id="name"></i>
        <a href="/reader_searchbook(no)" class="logout">Logout</a>
        <ul class="topmenu clearfix">
            <li><a id="reader" onclick="reader()" style="cursor: pointer">Reader</a></li>
        </ul>
    </header>
    <!--<div class="container-fluid" style="background-color: black">
        <div class="navbar-header">
            <a class="navbar-brand" style="color: white;font-family: 'Arial Narrow'"><i class="fa fa-cloud fa-lg"></i>Libraby</a>
            <a class="navbar-brand" href="#" style="color: white">Home</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
                       <li><a href="#" style="color: white"><span class="glyphicon glyphicon-user" style="color: white"></span>Sign in</a></li>-->
           <!-- <li><a href="#" style="color: white"><span class="glyphicon glyphicon-cog" style="color: white">Set</span></a></li>
            <li><a href="#" style="color: white"><span class="glyphicon glyphicon-log-out" style="color: white"></span>Log out</a></li>

        </ul>
    </div>
    <p th:text="'Reader Name: ' + ${user.rname}"></p>-->
    </nav>
    <div style="overflow:auto;overflow-x:hidden;margin: 0 auto;margin-top:50px;height:600px;width:1000px">
        <div class="test test-5">
            <td class="scrollbar">

                <table id="gradient-style" >
                    <thead style="background-color: black">
                    <tr >
                        <th scope="col">ID</th>
                        <th scope="col">Name</th>
                        <th scope="col">Start Time</th>
                        <th scope="col">End Time</th>
                        <th scope="col">Overdue(day)</th>
                        <th scope="col">Fine owed(yuan)</th>
                        <th scope="col" >pay</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr  th:each="msg:${readerfinerecord}">
                        <td th:text="${msg.id}"></td>
                        <td th:text="${msg.bname}"></td>
                        <td th:text="${msg.starttime}"></td>
                        <td th:text="${msg.endtime}"></td>
                        <td th:text="${msg.fine}"></td>
                        <td th:text="${msg.fine}"></td>
                        <td >
                            <form th:action="@{/payfine/}+${msg.phone}+'/'+${msg.rname}+'/'+${msg.ID}+'/'+${msg.starttime}+'/'+${msg.fine}" method="post">
                                <input type="hidden" name="_method" value="post">
                                <button  type="submit" class="btn btn-success" >pay</button>
                            </form>
                        </td>
                    </tr>
                    </tbody>
                </table>
        </div>
    </div>
</div>
</div>

<div>
    <footer class="footer">
        <div class="mandarin">
            <img src="images/mandarin.png" alt="">
        </div>
        <p>Shan ICP number18018134 | Powered by 1713011</p>
    </footer>
</div>

</body>
</html>
-->